
<template>
    <div>
        <div style="margin: 10px auto;width: 65vw;">
            <Form ref="post" :model="post" :rules="postRules" label-position="left" :label-width="100">
                <Form-Item label="标题:" prop="title">
                    <Input v-model="post.title" placeholder="请输入标题" />
                </Form-Item>
                <Form-Item  v-if="show_content" label="内容:" prop="content">
                    <MyEditor  ref='myEditor' v-model="post.content"   :defaultContent="post.content"></MyEditor>
                </Form-Item>
            </Form>
            <div style="text-align: center">
                <i-button size="default"   @click="submit_save_post('post')" type="primary">更新</i-button>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import { post } from '@/api/http'
import { blog_update,blog_detail} from  '@/api'
import MyEditor from '@/lib/editor/myEditor';

export default {
    components:{
        MyEditor
    },
    data() {
        return {
            post:{
                title: null,
                content: null,
            },
            postRules: {
                title:[
                    {required: true,message:"请输入标题",trigger: 'blur'},
                ],
            },
            show_content: false
        }
    },
    methods: {
        // 编辑好之后提交保存
        submit_save_post(name){
            let validate = false
            this.$refs[name].validate((valid) => {
                if (valid) {
                    validate = true
                    console.log('表单数据验证成功!')
                } else {
                    this.$Message.error('表单数据验证失败!');
                    validate = false
                }
            })
            if(!validate) return
            let post = this.post
            // console.log(post,name,this.$refs[name])
            let username = localStorage.getItem("username")
            console.log(post.content)
            let data = {
                "id":post.id,
                "title":post.title,
                "content":post.content,
                "username": username
            }
            axios({ method: 'post', url: blog_update, data: data,timeout: 2000,}).then( (response) => {
                    let info = JSON.stringify(response.data)
                    if(info.indexOf('ok') != -1) {
                        this.$Message.success('更新文章成功')
                        this.$router.push({name:'postList'})
                    }else {
                        this.$Message.error('更新保存失败')
                    }
                }
            )
        },
        refresh() {
            let query = this.$router.currentRoute.query
            let id = query.id
            // console.log("post edit 接收到的参数id:",id)
            let data = {"id":id}
            post(blog_detail,data).then(response=>{
                this.show_content = true
                this.post = response.data
            }) 
        }
    },
    mounted: function() {
        setTimeout(() =>{
            this.refresh();
        },200); 
    }
}
</script>
<style scoped>
pre {
    padding: 5px ;
}

</style>